import { Space, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import "./../../assets/css/cusHighSeas/common.css";
import { inject, observer } from 'mobx-react';


const PendingAudit = (props) => { 
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'customer_name',
    },
    {
      title: '联系人',
      dataIndex: 'contact_name',
      render: (text) => <a href='/'>{text}</a>,
    },
    {
      title: '手机号码',
      dataIndex: 'phone_number',
    },
    {
      title: '客户来源',
      dataIndex: 'customer_source',
    },
    {
      title: '录入时间',
      dataIndex: 'entry_time',
    },
    {
      title: '最后更新',
      dataIndex: 'last_update',
    },
    {
      title: '申请人',
      dataIndex: 'user_id',
    },
    {
      title: '申请时间',
      dataIndex: 'apply_time',
    },
    {
      title: '管理',
      key:'action',
      // record为table当前行数据
      render: (record) => (
        <Space size="middle"  style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          <button className='BtnPass show' onClick={()=>applyPass(record)}>通过审核</button>
          <button className='BtnNo show' onClick={()=>refuse(record)}>拒绝审核</button>
          <button className='BtnUpdate'>修改</button>
          <button className='BtnDel' >删除</button>
        </Space>
      ),
    }
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
   //拒绝审核
   const refuse = (record) => { 
    let id = record.customer_id
    props.cushighseaStore.applyData({customer_id:id,btn_status:'0'}).then(props.cushighseaStore.pendingAuditData({ currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize }))
    // let BtnApply = GetElement('CHSManage', 'data-row-key', id,'.BtnApply')
    // let BtnPass = GetElement('CHSManage', 'data-row-key', id,'.BtnPass')
    // let BtnNo = GetElement('CHSManage', 'data-row-key', id, '.BtnNo')
    // BtnApply.classList.remove('none');
    // BtnPass.classList.remove('show');
    // BtnNo.classList.remove('show');
  }
  //通过单个审核
  const applyPass = (record) => { 
    let id = record.customer_id
    props.cushighseaStore.applyPassData({user_id:'admin',customer_id:id})
  }
  // useEffect(() => { 
  //   props.cushighseaStore.pendingAuditData({currentPage: 1, pageSize: 10})
  // },[])
  return(
    <div>
      <Table className='CHStable' id='CHSPendAudit'
          rowSelection={{
            ...rowSelection,
          }}
          columns={columns}
          dataSource={props.cushighseaStore.CHSPdata}
          pagination={false}
      />
      
    </div>
  )
};


export default inject('cushighseaStore')(observer(PendingAudit))